@import 'typography';
@import 'margins';
$theme: 'dark' !default;
$color-primary: #3f51b5; // Don't change this value since it's dynamically changed by the theme Manager
$ripple: rgba(255, 255, 255, 0.12);
$shadow-opacity: 0.4;

@if $theme== 'light' {
    $shadow-opacity: 0.15;
}

$shadow: 3px 3px 6px rgba(0, 0, 0, $shadow-opacity);
$surface-opacity: 0.987; // Don't change this value since it's dynamically changed by the theme Manager
$panel-opacity: 0.876; // Don't change this value since it's dynamically changed by the theme Manager

@function getForegroundColor($bgColor, $opacity) {
    @if ($bgColor== 'light') {
        @return rgba(0, 0, 0, $opacity);
    }

    @if ($bgColor== 'dark') {
        @return rgba(255, 255, 255, $opacity);
    }

    @if ($bgColor== 'primary') {
        @return rgba(255, 255, 255, $opacity);
    }
}

@mixin foreground($theme, $opacity) {
    @if ($theme== 'light') {
        color: getForegroundColor('light', $opacity);
    }

    @if ($theme== 'dark') {
        color: getForegroundColor('dark', $opacity);
    }

    @if ($theme== 'primary') {
        color: getForegroundColor('dark', $opacity);

        @at-root .light-primary#{&} {
            color: getForegroundColor('light', $opacity);
        }

        @at-root .dark-primary#{&} {
            color: getForegroundColor('dark', $opacity);
        }
    }
}

@function getBackgroundColor($theme) {
    @if ($theme== 'light') {
        @return rgba(255, 255, 255, 1);
    }

    @if ($theme== 'dark') {
        @return rgba(25, 25, 25, 1);
    }

    @if ($theme== 'primary') {
        @return $color-primary;
    }
}

@function getDarkerColor($color) {
    @return scale-color($color, $lightness: -10%);
}

@function getLighterColor($color) {
    @return scale-color($color, $lightness: 10%);
}

@mixin background($theme) {
    background: getBackgroundColor($theme);
}

@mixin foreground-as-background($theme, $opacity) {
    @if ($theme== 'light') {
        background: rgba(0, 0, 0, $opacity);
    }

    @if ($theme== 'dark') {
        background: rgba(255, 255, 255, $opacity);
    }

    @if ($theme== 'primary') {
        background: rgba(255, 255, 255, $opacity);

        @at-root .light-primary#{&} {
            background: rgba(0, 0, 0, $opacity);
        }

        @at-root .dark-primary#{&} {
            background: rgba(255, 255, 255, $opacity);
        }
    }
}

@mixin hover($theme) {
    @if ($theme== 'light') {
        background: rgba(0, 0, 0, 0.08);
    }

    @if ($theme== 'dark') {
        background: rgba(255, 255, 255, 0.04);
    }

    @if ($theme== 'primary') {
        background: getLighterColor(getBackgroundColor($theme));

        @at-root .light-primary#{&} {
            background: getDarkerColor(getBackgroundColor($theme));
        }

        @at-root .dark-primary#{&} {
            background: getLighterColor(getBackgroundColor($theme));
        }
    }
}

@mixin active($theme) {
    @if ($theme== 'light') {
        background: rgba(0, 0, 0, 0.12);
    }

    @if ($theme== 'dark') {
        background: rgba(255, 255, 255, 0.12);
    }

    @if ($theme== 'primary') {
        background: rgba(255, 255, 255, 0.12);

        @at-root .light-primary#{&} {
            background: rgba(0, 0, 0, 0.12);
        }

        @at-root .dark-primary#{&} {
            background: rgba(255, 255, 255, 0.12);
        }
    }
}

@mixin selected($theme) {
    @if ($theme== 'light') {
        background: rgba(0, 0, 0, 0.03);
    }

    @if ($theme== 'dark') {
        background: rgba(255, 255, 255, 0.03);
    }

    @if ($theme== 'primary') {
        background: rgba(255, 255, 255, 0.03);

        @at-root .light-primary#{&} {
            background: rgba(0, 0, 0, 0.03);
        }

        @at-root .dark-primary#{&} {
            background: rgba(255, 255, 255, 0.03);
        }
    }
}

@mixin foreground-high-emphasis($theme) {
    @include foreground($theme, 0.87);
}

@mixin foreground-medium-emphasis($theme) {
    @include foreground($theme, 0.6);
}

@mixin foreground-disabled($theme) {
    @include foreground($theme, 0.38);
}

@mixin foreground-as-background-high-emphasis($theme) {
    @include foreground-as-background($theme, 0.87);
}

@mixin foreground-as-background-medium-emphasis($theme) {
    @include foreground-as-background($theme, 0.6);
}

@mixin foreground-as-background-disabled($theme) {
    @include foreground-as-background($theme, 0.38);
}

.text-high-emphasis {
    @include foreground-high-emphasis($theme);
}

.text-medium-emphasis {
    @include foreground-medium-emphasis($theme);
}

.text-disabled {
    @include foreground-disabled($theme);
}

.workspace-active-indicator {
    @if ($theme== 'primary') {
        @include foreground-as-background-high-emphasis('primary');
    } @else {
        @include background('primary');
    }

    width: 2px;
}

.ripple-wave {
    //This is a hack because percentage is not handled yet
    border-radius: 10000px;
    @include active($theme);
}

.mat-button {
    @include foreground-high-emphasis($theme);

    &:hover,
    &.highlighted {
        @include hover($theme);
    }

    &.primary {
        @include background('primary');

        @include foreground-high-emphasis('primary');

        &:hover,
        &.highlighted {
            @include hover('primary');
        }
    }
}

.mat-button {
    .mat-panel-button {
        @include foreground-medium-emphasis($theme);

        &.active {
            @include selected($theme);

            @if ($theme== 'light') {
                color: $color-primary;
            } @else {
                @include foreground-high-emphasis($theme);
            }
        }
    }
}

.background-primary {
    @include background('primary');
}

#msPanel {
    background: rgba(getBackgroundColor($theme), $panel-opacity);

    &.position-left {
        @if ($theme== 'light') {
            box-shadow: inset -1px 0px rgba(0, 0, 0, 0.08);
        }

        @if ($theme== 'dark') {
            box-shadow: inset -1px 0px rgba(255, 255, 255, 0.04);
        }

        @if ($theme== 'primary') {
            box-shadow: inset -1px
                0px
                getLighterColor(getBackgroundColor($theme));

            @at-root .light-primary#{&} {
                box-shadow: inset -1px 0px getDarkerColor(getBackgroundColor($theme));
            }

            @at-root .dark-primary#{&} {
                box-shadow: inset -1px 0px getLighterColor(getBackgroundColor($theme));
            }
        }
    }
    &.position-right {
        @if ($theme== 'light') {
            box-shadow: inset 1px 0px rgba(0, 0, 0, 0.08);
        }

        @if ($theme== 'dark') {
            box-shadow: inset 1px 0px rgba(255, 255, 255, 0.04);
        }

        @if ($theme== 'primary') {
            box-shadow: inset
                1px
                0px
                getLighterColor(getBackgroundColor($theme));

            @at-root .light-primary#{&} {
                box-shadow: inset 1px 0px
                    getDarkerColor(getBackgroundColor($theme));
            }

            @at-root .dark-primary#{&} {
                box-shadow: inset 1px 0px
                    getLighterColor(getBackgroundColor($theme));
            }
        }
    }

    transition-duration: 0.2s;

    &.shadow {
        box-shadow: $shadow;
    }
    .panel-button {
        @include foreground-medium-emphasis($theme);
        text-align: center;
        font-weight: bold;
        -natural-hpadding: 0px;
        -minimum-hpadding: 0px;
        .app-menu-icon {
            -st-icon-style: symbolic;
            margin-left: 4px;
            margin-right: 4px;
            //dimensions of the icon are hardcoded
        }

        &:hover {
            @include hover($theme);
        }

        &:active,
        &:overview,
        &:focus,
        &:checked {
            // Trick due to St limitations. It needs a background to draw
            // a box-shadow
            //background-color: rgba(0, 0, 0, 0.01);
            @include hover($theme);
            box-shadow: inset 3px 0 0px $color-primary;
            @include foreground-high-emphasis($theme);
        }

        .unlock-screen &,
        .login-screen &,
        .lock-screen & {
            @include foreground-medium-emphasis($theme);
            &:focus,
            &:hover,
            &:active {
                @include foreground-high-emphasis($theme);
            }
        }
    }

    .panel-status-indicators-box,
    .panel-status-menu-box {
        spacing: 2px;
        vertical-align: middle;
        text-align: center;
        min-height: 20px;
    }
    .system-status-icon {
        padding: 0px;
    }
    MsDateMenuBox {
        StIcon {
            .primary {
                color: $color-primary;
            }
        }
        StLabel {
            margin: 8px 0px;

            .primary {
                color: $color-primary;
            }
        }
    }
    WorkspaceButton {
        @include foreground-medium-emphasis($theme);

        &.active {
            @include selected($theme);

            @include foreground-high-emphasis($theme);
        }
    }
}

#horizontalPanel {
    background: rgba(getBackgroundColor($theme), $panel-opacity);
    $topPanelTheme: $theme;

    @if ($theme== 'primary') {
        $topPanelTheme: 'light';
    }

    &.position-top {
        @if ($theme== 'light') {
            box-shadow: inset 0px -1px rgba(0, 0, 0, 0.08);
        }

        @if ($theme== 'dark') {
            box-shadow: inset 0px -1px rgba(255, 255, 255, 0.04);
        }

        @if ($theme== 'primary') {
            box-shadow: inset
                0px -1px
                getLighterColor(getBackgroundColor($theme));

            @at-root .light-primary#{&} {
                box-shadow: inset 0px -1px getDarkerColor(getBackgroundColor($theme));
            }

            @at-root .dark-primary#{&} {
                box-shadow: inset 0px -1px getLighterColor(getBackgroundColor($theme));
            }
        }
    }

    &.position-bottom {
        @if ($theme== 'light') {
            box-shadow: inset 0px 1px rgba(0, 0, 0, 0.08);
        }

        @if ($theme== 'dark') {
            box-shadow: inset 0px 1px rgba(255, 255, 255, 0.04);
        }

        @if ($theme== 'primary') {
            box-shadow: inset
                0px
                1px
                getLighterColor(getBackgroundColor($theme));

            @at-root .light-primary#{&} {
                box-shadow: inset 0px 1px
                    getDarkerColor(getBackgroundColor($theme));
            }

            @at-root .dark-primary#{&} {
                box-shadow: inset 0px 1px
                    getLighterColor(getBackgroundColor($theme));
            }
        }
    }

    .task-active-indicator {
        @if ($topPanelTheme== 'dark') {
            @include background('light');
        } @else {
            @include background('primary');
        }

        height: 2px;
    }

    .mat-panel-button {
        .mat-panel-button-icon {
            @include foreground-medium-emphasis($topPanelTheme);
        }

        &.active {
            @include active($topPanelTheme);

            .mat-panel-button-icon {
                @include foreground-high-emphasis($topPanelTheme);
            }
        }
    }
    .clock-label {
        @include foreground-medium-emphasis($theme);
        @extend .subtitle-2;
        margin-top: 3px;
        margin-right: 16px;
        margin-left: 16px;
    }
}

// This need to be at racine because it's dragged
.task-bar-item {
    font-size: 10.5pt;

    &.active {
        .task-bar-item-content,
        .task-bar-icon-container {
            @include selected($theme);

            @if ($theme== 'light') {
                color: $color-primary;
            } @else {
                @include foreground-high-emphasis($theme);
            }
        }
    }
    .task-bar-icon-container {
        @include foreground-medium-emphasis($theme);
    }
    .app-icon {
        icon-size: 24px;
        width: 24px;
        height: 24px;
    }

    .task-bar-item-content {
        padding: 0px 12px;
        @include foreground-medium-emphasis($theme);
        max-width: 248px;
        .app-icon {
            margin-right: 12px;
        }
        .task-bar-item-title {
            margin-right: 12px;
            font-weight: 600;
            font-size: 10.5pt;
        }

        .task-close-button {
            border-radius: 20px;
            width: 24px;
            height: 24px;
            @include foreground-medium-emphasis($theme);
            transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

            &:hover {
                @if ($theme== 'light') {
                    background: rgba(0, 0, 0, 0.12);
                } @else {
                    background: rgba(255, 255, 255, 0.12);
                }
            }

            &:hover:active {
                @if ($theme== 'light') {
                    background: rgba(0, 0, 0, 0.24);
                } @else {
                    background: rgba(255, 255, 255, 0.24);
                }
            }
        }
        .task-small-icon {
            icon-size: 18px;
        }
    }
}

.drop-placeholder {
    @include foreground-as-background($theme, 0.1);
}

.mat-card {
    border-radius: 6px;
    box-shadow: $shadow;

    .mat-card-title {
        @if ($theme== 'primary') {
            @include background($theme);
        } @else {
            @include hover($theme);
        }

        @if ($theme== 'light') {
            color: $color-primary;
        } @else {
            @include foreground-high-emphasis($theme);
        }

        height: 72px;
        padding: 0px 24px;

        .mat-card-title-icon {
            icon-size: 40px;
            margin-right: 16px;
        }

        .mat-card-title-label {
            font-size: 18pt;
        }
    }

    .mat-card-content {
        padding: 24px;
        @include foreground-high-emphasis($theme);
    }
}
MsApplicationLauncher,
MsPanel {
    * .search-entry {
        @include foreground-medium-emphasis($theme);
        @include background($theme);
        border-radius: 48px;
        margin: 0px;

        * {
            @include foreground-medium-emphasis($theme);
        }
    }
    * .search-entry-icon {
        @include foreground-medium-emphasis($theme);
    }
}

MatTooltip {
    @include foreground-high-emphasis('dark');
    background-color: getDarkerColor(
        getDarkerColor(getBackgroundColor('dark'))
    );
    border-radius: 4px;
    padding: 0px 8px;
    min-height: 24px;
    @extend .caption;
    text-align: center;
}

#matDivider {
    .inner-divider {
        @include hover($theme);
    }
}

.surface {
    background: rgba(getBackgroundColor($theme), $surface-opacity);
}
.surface-lighter {
    background: rgba(
        getLighterColor(getBackgroundColor($theme)),
        $surface-opacity
    );
}
.surface-darker {
    background: rgba(
        getDarkerColor(getBackgroundColor($theme)),
        $surface-opacity
    );
}
.popup-menu {
    margin-bottom: 0;
    -arrow-base: 0px;
    -arrow-rise: 0px;
}
// If there is no custom theme loaded we can override adwaita to provide better material theme
/* .no-theme {
    .popup-menu {
        margin: 0;
        -boxpointer-gap: 0px;
        -arrow-border-radius: 0;
        -arrow-border-width: 0px;
        -arrow-border-color: transparent;
        -arrow-base: 0px;
        -arrow-rise: 0px;
        -arrow-background-color: transparent;
        .popup-menu-content {
            background: getDarkerColor(getBackgroundColor('dark'));
            margin: 0;
            padding-top: 8px;
            padding-bottom: 8px;
            border-radius: 8px;
            .popup-menu-item {
                font-weight: 400;
                padding-top: 10px;
                padding-bottom: 10px;
                @extend .body-2;
                .popup-menu-icon {
                    icon-size: 20px;
                    margin-right: 10px;
                    @include foreground-medium-emphasis('dark');
                }
                StLabel {
                    padding: 0;
                    padding-top: 1.5px;
                    @include foreground-high-emphasis('dark');
                }
                &.selected {
                    @extend .surface;
                }
            }
            .popup-separator-menu-item {
                padding: 0;
                spacing: 0px;
                .popup-separator-menu-item-separator {
                    margin: 8px 0px;
                    padding: 0;
                    @include hover('dark');
                }
                StLabel {
                    padding: 0;
                    margin: 8px 10px;
                    @include foreground-disabled('dark');
                }
                .popup-menu-ornament {
                    width: 0;
                    padding: 0;
                    margin: 0;
                }
            }
            .popup-sub-menu {
                background: rgba(0, 0, 0, 0.12);
                box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.12);
            }
            .popup-submenu-menu-item:open {
                @extend .surface-lighter;
            }
        }
        &.panel-menu {
            border-radius: 0px 8px 8px 0px;

            .popup-menu-content {
                margin-top: 20px; // space for shadow
                border-radius: 0px 8px 8px 0px;
                box-shadow: 3px 0px 8px rgba(0, 0, 0, 0.4);
            }
        }
        &.horizontal-panel-menu {
            border-radius: 0px 0px 8px 8px;

            .popup-menu-content {
                margin-left: 20px; // space for shadow
                border-radius: 0px 0px 8px 8px;
                box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.4);
            }
        }
    }
    #calendarArea {
        .calendar,
        .message,
        .events-button,
        .world-clocks-button,
        .weather-button,
        .events-section-title {
            background: getLighterColor(getBackgroundColor('dark'));
            border: 0px;
        }
    }
} */

LayoutSwitcher {
    & > StBin {
        padding: 8px 0;
        margin-right: 8px;
    }
}

MatNumberPicker {
    @include foreground-high-emphasis($theme);
    @if $theme== 'dark' {
        background: getDarkerColor(getBackgroundColor($theme));
    }
    //This is a hack because percentage is not handled yet
    border-radius: 10000px;
    StButton {
        @if $theme== 'light' {
            @include hover($theme);
        } @else {
            background: getLighterColor(getBackgroundColor($theme));
        }
        width: 32px;
        StIcon {
            margin: 8px;
        }
        &:first-child {
            border-radius: 32px 0 0 32px;
        }
        &:last-child {
            border-radius: 0 32px 32px 0;
        }
        &:hover {
            @if $theme== 'light' {
                background: getDarkerColor(getBackgroundColor($theme));
            } @else {
                background: getLighterColor(
                    getLighterColor(getBackgroundColor($theme))
                );
            }
        }
        &:active {
            @if $theme== 'light' {
                background: getDarkerColor(
                    getDarkerColor(getBackgroundColor($theme))
                );
            } @else {
                background: getLighterColor(
                    getLighterColor(getLighterColor(getBackgroundColor($theme)))
                );
            }
        }
    }
    StLabel {
        margin-left: 8px;
        margin-right: 8px;
    }
}
